<template>
    <a-form :model="queryForm" layout="inline" style="width: 100%;background-color: white">
        <a-form-item>
            <a-button type="primary" @click="handleClick()">新增商品</a-button>
        </a-form-item>
    </a-form>
    <div class="images-grid">
        <template v-for="item in foodList">
            <a-card  style=" width: 200px ">
                <template #actions>
                    <span class="icon-hover"> <icon-lock/> </span>
                    <a-popconfirm content="删除?" @ok="deleteFood(item.id)">
                        <IconDelete/>
                    </a-popconfirm>
                </template>
                <template #cover>
                    <div
                            :style="{
          height: '150px',
          overflow: 'hidden',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }"
                    >
                        <img
                                :style="{ width: '80%', transform: 'translateY(20px)' }"
                                alt="dessert"
                                :src="item.foodImg"
                        />
                    </div>
                </template>
                <a-card-meta :title=item.foodName :description=item.foodExplain>
                    <template #avatar>
                        <div
                                :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }"
                        >
                            <a-typography-text style="color: red">￥{{ item.foodPrice.toFixed(2) }}</a-typography-text>
                        </div>
                    </template>
                </a-card-meta>
            </a-card>
        </template>
    </div>
    <div class="foodModalForm">
        <!--        弹出框-->
        <a-modal v-model:visible="visible" title="添加商品" @cancel="handleCancel()" @before-ok="handleBeforeOk">
            <a-form :model="form">
                <a-form-item field="name" label="商品名称">
                    <a-input v-model="form.foodName" allow-clear/>
                </a-form-item>

                <a-form-item field="name" label="描述">
                    <a-input v-model="form.foodExplain" allow-clear/>
                </a-form-item>

                <a-form-item field="name" label="商品图标">
                    <a-space direction="vertical" :style="{ width: '100%' }">
                        <a-upload
                                action="/"
                                :fileList="file ? [file] : []"
                                :show-file-list="false"
                                @change="onChange"
                                @progress="onProgress"
                        >
                            <template #upload-button>
                                <div
                                        :class="`arco-upload-list-item${
            file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
          }`"
                                >
                                    <div
                                            class="arco-upload-list-picture custom-upload-avatar"
                                            v-if="file && file.url"
                                    >
                                        <img :src="file.url"/>
                                        <div class="arco-upload-list-picture-mask">
                                            <IconEdit/>
                                        </div>
                                        <a-progress
                                                v-if="file.status === 'uploading' && file.percent < 100"
                                                :percent="file.percent"
                                                type="circle"
                                                size="mini"
                                                :style="{
                position: 'absolute',
                left: '50%',
                top: '50%',
                transform: 'translateX(-50%) translateY(-50%)',
              }"
                                        />
                                    </div>
                                    <div class="arco-upload-picture-card" v-else>
                                        <div class="arco-upload-picture-card-text">
                                            <IconPlus/>
                                            <div style="margin-top: 10px; font-weight: 600">Upload</div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </a-upload>
                    </a-space>
                </a-form-item>

                <a-form-item field="name" label="价格">
                    <a-input-number v-model="form.foodPrice" :style="{width:'100px'}" placeholder="Please Enter"
                                    class="input-demo" :min="0" :max="100"/>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script lang="ts" setup>
import {onMounted, ref, watch} from 'vue';
import {FoodDTO, FoodVO} from "../type/food.ts";
import {deleteFoodAPI, getFoodsByIdAPI} from "../service/food.ts";
import {
    IconEdit,
    IconLock,
    IconDelete,
} from '@arco-design/web-vue/es/icon';
import {add} from "../service/food.ts";

const id = defineModel('id', {
    required: true,
    default: 0,
    type: Number
})
const visible = ref(false)
const foodList = ref<FoodVO[]>([])
const queryForm = ref({
    name: "",
});
const loadData = async () => {
    const res = await getFoodsByIdAPI(id.value)
    foodList.value = res.data
}
const handleClick = () => {
    visible.value = true
}
watch(id, (newValue) => {
    loadData()
})
onMounted(async () => {
    //数据
    await loadData();
})
const file = ref();


const handleCancel = () => {
    visible.value = false;
}

const onChange = (_, currentFile) => {
    file.value = {
        ...currentFile,
    };
};
const onProgress = (currentFile) => {
    file.value = currentFile;
};
const form = ref<FoodDTO>({
    businessId: 0,
    foodExplain: "",
    foodName: "",
    foodPrice: 0,
    file: file.value,
    biz: "food_image",
})
/**
 * 提交
 * */
const handleBeforeOk = async (done) => {
    const isValid = ref(true)
    form.value.file = file.value.file;
    form.value.businessId = id.value
    console.log(form)

    const formData = new FormData()
    for (const key in form.value) {
        if (form.value[key] != "") {
            formData.append(key, form.value[key])
        } else {
            isValid.value = false;
        }

    }
    if (isValid.value) {
        const res = await add(formData);
        if (res.data != null && res.data.id > 0) {
            alert("添加成功")
            await loadData();
        } else {
            alert("添加失败")
        }
    } else {
        alert("请填写完整")
    }

    done()
};

/**
 * 删除
 * */
const deleteFood = async (id: number) => {
    const res = await deleteFoodAPI(id);
    if (res.data){
        alert("删除成功")
        await loadData();
    }else {
        alert("删除失败")
    }
}

</script>

<style scoped>
.images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 1rem;
}
</style>
